<template>
  <div :class="['container', customClass]">
    <div class="inner-container">
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="['itemClass', itemCustomClass]"
        @click="onClick(index + 1, item)"
      >
        <span>{{ item[keyName] }} : </span>
        <span>{{ item[valueName] }}</span>
      </div>
    </div>
    <slot name="container"></slot>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    customClass: {
      type: String,
      default: "",
    },
    itemCustomClass: {
      type: String,
      default: "",
    },
    keyName: {
      type: String,
      default: "name",
    },
    valueName: {
      type: String,
      default: "value",
    },
    isCallBack: {
      type: Boolean,
      default:false,
    },
  },
  methods: {
    onClick(index, row) {
      if(!this.isCallBack)return;
      this.$emit("customClick", { index, row });
    },
  },
};
</script>
<style src='./index.css' scoped></style>